import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import './assets/css/global.css' // 导入全局样式
import './assets/fonts/iconfont.css' // 导入字体样式
import axios from 'axios' // 以axios的名字引入axios模块
import ZkTable from 'vue-table-with-tree-grid' // 导入树形表运行依赖
import VueQuillEditor from 'vue-quill-editor' // 导入VueQuillEditor依赖
import 'quill/dist/quill.core.css' // 导入VueQuillEditor所需要的样式表
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import NProgress from 'nprogress'

import('nprogress/nprogress.css')

Vue.config.productionTip = false
Vue.prototype.$http = axios // 使用axios需要这样使用  注册全局， 需要使用它的方法，这样才可以才全局使用，通过$http访问
Vue.prototype.$process = function (ret, callback) {
  const data = ret.data
  const status = data.meta.status
  if (status !== 200 && status !== 201 && status !== 204) {
    this.$message.error(data.meta.msg)
    callback()
    return
  } else {
    this.$message.success(data.meta.msg)
    callback()
  }
  console.log(data)
}

// 配置基本路径
axios.defaults.baseURL = 'http://localhost:8888/api/private/v1/'

// 因为每一次请求都会验证token，所以我们应该在每一次请求都添加token，如果在vue中手动添加太麻烦了，我们就可以使用请求拦截器
// 为每一次的请求添加token 具体语法如下  interceptors 就是拦截器的意思  request就是请求的意思， 然后use传入一个函数作为参数
// 函数中可以传入一个默认参数config（名字是自定义的），其中就包括了发送请求时携带的数据 和请求头
// 我们只需要将token挂载到请求头中去就可以了
axios.interceptors.request.use((config) => {
  config.headers.Authorization = window.sessionStorage.token
  // console.log(config)
  // 最后必须return config 不然不会跳转还会报错

  // 再request拦截器中显示进度条
  NProgress.start()

  return config
})
axios.interceptors.response.use((config) => {
  // 在response拦截器中结束进度条
  NProgress.done()

  return config
})

// 这里使用了vue中的过滤器，挂载到Vue上就是全局的过滤器，可以在{{}} 和:v-bind中使用
// 这个过滤器的作用主要是处理时间
Vue.filter('dataFormat', function (dateTime) {
  const date = new Date(dateTime)
  const yyyy = date.getFullYear()
  // padStart是es2017也就是es6新增的字符串方法 所以这里的date.getMonth()+1+''是为了转换为字符串
  // padStart对应的还有一个padEnd方法 是用于补全字符串的，传入两个参数，第一个参数是规定的长度
  // 如果不满足这个长度就进行
  const m = (date.getMonth() + 1 + '').padStart(2, '0')
  const d = date.getDate()
  const H = date.getHours()
  const M = date.getMinutes()
  const S = (date.getSeconds() + '').padStart(2, '0')
  return `${yyyy}-${m}-${d}  ${H}:${M}:${S}`
})

// Vue.use(ZkTable) // 使用use的方式
Vue.component('tree-table', ZkTable) // 把依赖加入到组件中去
Vue.use(VueQuillEditor) // 使用VueQuillEditor

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
